<template>
  <div class="head_box" style="background: linear-gradient(to right, #EF6A59, #E25176);">
    <div id="headList">
      <div class="logo_nav">
        <!-- <router-link to="/home"> -->
          <div class="logoHome">
            <div>
              <img src="../../assets/header-log.png" alt="">
              <!-- <img src="../../assets/homeLogo.png" v-if="$i18n.locale == 'zh'" alt="" title="网址顶图" />
              <img src="../../assets/homeLogoEn.png" v-else alt="" title="网址顶图" /> -->
            </div>
          <!-- <h2>作者平台</h2> -->
          </div>
        <!-- </router-link> -->
      </div>
      <div class="cont_nav">
        <div class="left_nav">
          <!-- <div class="nav_li">
            <router-link
              style="padding-right: 36px; "
              class="tocont"
              to="/home"
              >首页</router-link
            >
          </div> -->
          <!-- <div class="nav_li">
            <router-link style="margin-left: 20px" class="tocont" to="/news"
              >最新资讯</router-link
            >
          </div> -->
          <!-- <div class="nav_li">
            <router-link class="tocont" to="/authorWelfare"
              >作者福利</router-link
            >
          </div> -->
          <!-- <div class="nav_li">
            <router-link class="tocont" to="/activity">站内活动</router-link>
          </div> -->
        </div>

        <div class="right_nav">
          <div class="nav_li">
            <!-- 帮助 -->
            <router-link class="tocont" to="/info/help">
              <i class="iconfont icon-fankui"></i>
            </router-link>
           
          </div>
          <div class="nav_li" v-if="bTrue">
            <!-- 咨询 -->
            <router-link class="tocont" to="/author/msgCenter">
              <i class="iconfont icon-tixing"></i>
            </router-link>
          </div>
          <!-- <div
            class="nav_li"
            title="login"
            v-if="
              Object.keys($store.state.userInfo).length > 0 &&
              $store.state.userInfo.token != ''
            "
          >
            <router-link class="tocont" to="/author/msgCenter">
              <el-badge v-if="msgNum" value="new" class="item"
                ><i class="iconfont iconzhong"></i
                ></el-badge>
              <i v-else class="iconfont iconzhong"></i>
            </router-link>
          </div> -->
          <div class="user" v-if="bTrue">
            <div class="nav_li" title="login">
              <el-popover placement="bottom" trigger="click" padding="0">
                <div class="toolbar_user">
                  <!-- <router-link to="/author/center"
                    ><li>
                       {{$t("home.personalData")}}
                    </li></router-link
                  > -->
                  <li style="cursor: pointer" @click="logout()">{{$t("home.signOut")}}</li>
                </div>
                <!-- <el-button >click 激活</el-button> -->
                <el-avatar
                  slot="reference"
                  :size="30"
                  :src="$store.state.userInfo.coverUrl"
                ></el-avatar>
              </el-popover>
            </div>
            <div class="nav_li" title="login">
              <!-- <router-link class="tocont" to="/author/center"> -->
               <el-popover placement="bottom" trigger="click" padding="0">
                <div class="toolbar_user">
                  <li style="cursor: pointer" @click="logout()">{{$t("home.signOut")}}</li>
                </div>
                <!-- <el-button >click 激活</el-button> -->
                <el-avatar
                style="opacity:1;background:#e45671;height:30px;line-height:30px;cursor: pointer;"
                  slot="reference"
                  :size="100"
                  border-radio:none
                  
                >
                {{ $store.state.userInfo.authorName }}
                </el-avatar>
              </el-popover>
                
              <!-- </router-link> -->
            </div>
          </div>

          <div class="nav_li" title="login" v-else>
            <!-- <router-link class="tocont" to="/improveInfor">
              <i class="iconfont icon-wode_2"></i> -->
              <!-- <img src="../../assets/head/my.png" alt="" class="my_img" /> -->
              <!-- <span style="margin-left: 11px;">{{$t("home.RegisterAsAnAuthor")}}</span>
            </router-link> -->
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import base from "@/assets/base.css";
export default {
  data() {
    return {
      login: true,
      username: this.$t("home.assignedUserName"),
      msgNum: null,
    };
  },
  methods: {
    // 用户退出
    logout() {
        this.$store.commit("setUserInfo", "");
      localStorage.removeItem("token");
      sessionStorage.removeItem("userInfo");
      localStorage.removeItem("userInfo")
      this.$router.push("/home");
    },
  },
  created() {

  },
  mounted() {
    
  },
  computed: {
    bTrue: function () {
      return this.$store.state.userInfo.token;
    },
  },
};
</script>
<style lang="scss">
  .el-popper{
    padding: 2.5px 0;
    box-sizing: border-box;
  }
</style>
<style lang="scss" scoped="scoped">

.logoHome{
  display: flex;
  color:#333;
  h2{
    line-height: 85px;
    font-size: 32px;
    margin-left: 15px;
  }
}
i {
  font-size: 22px;
}
.toolbar_user {
  width: 100%;
  li {
    text-align: center;
    color: black;
    padding: 7.5px 0;
  }
}
.nav_li {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  a {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    // color: #333333;
    margin: 0 15px;
    display: flex;
    align-items: center;
  }
  // a.tocont.router-link-active {
  //   color: #21d4cf;
  //   font-weight: 600;
  // }
}

#headList {
  width: 1200px;
  margin:0 auto;
  display: flex;
  flex-direction: row;
  height: 80px;
  .logo_nav {
    width: 250px;
    margin-right: 40px;

    img {
      margin: 15px 0;
    }
  }

  .cont_nav {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .left_nav {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      text-align: center;
    }

    .right_nav {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      text-align: center;

      .user {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        text-align: center;
        margin-left: 15px;
      }
    }
  }
}
.help_img{
  width: 20px;
  height: 20px;
}
.notice_img{
  width: 17px;
  height: 20px;
}
.my_img{
		width: 16px;
		height: 20px;
    margin-right: 11px;
	}
</style>
